<script setup lang="ts">
import type {IPage} from '@/type/interfaces'
import type { PropType } from 'vue'
interface IProps {
  page: IPage
  age: number
}
// const props2 = withDefaults(defineProps<IProps>(), {
//   age:10
// })
const props = defineProps({
  age:{
    type: Number,
    default:0
  },
  page:{
    type: Object as PropType<IPage>,
    default:{
      // 顺序一般是全局制定
      layout : ' prev, pager, next, jumper, sizes,',
      hideOnSinglePage: false,
      pageSizes: [10, 20, 30, 40, 50, 100,200],
      total: 0,
      pageSize: 10,
      currentPage: 1,
    }
  }
})
const pageInfo = ref<IPage>({
      total: 0,
      pageSize: 10,
      currentPage: 1,
})
const emit = defineEmits(['change'])
const pageUpdateEvent = () =>{
  //分页更新事件
  // 整合@current-change @size-change 两个事件，父组件仅需
  // 侦听 @change事件，覆盖赋值即可
  emit('change',pageInfo.value)
}
const pageChange = (currentPage:number)=>{
  pageInfo.value.currentPage = currentPage
  pageUpdateEvent()
}
const sizeChange = (pageSize:number)=>{
  pageInfo.value.pageSize = pageSize
  pageUpdateEvent()
}
const init = ()=>{
  Object.assign(pageInfo.value,props.page)
}
init()
</script>
<template>
  <div class="flex flex-col items-center pt-10">
  <el-pagination
      v-model:current-page="pageInfo.currentPage"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="page.pageSizes"
      :layout="page.layout"
      :hide-on-single-page="page.hideOnSinglePage"
      background
      :total="page.total"
      @current-change="pageChange"
      @size-change="sizeChange"
    />
    <div class="text-14px mt-5 leading-6 bg-[#b3e19d] p-5 rounded-lg">
      <div>简化思路：</div>
      <div>初始化仅需3个属性 ：total,pageSize,currentPage。切换分页&更换页目录只需后两者</div>
      <div>除了以上3个属性外，其余在项目研发中，从设计来看均需设置为默认值，个别特例除外</div>
      <div>这在需求阶段有眉目，设计阶段完全确定下来</div>
      <div>组件内不做页码处理，可以由服务器，或者 axios封装时，统一减1,有的数据库分页角标从0开始</div>
      <div>更多参阅源码</div>
    </div>
  </div>
</template>